import React,{Component,Fragment} from 'react'
import styles from './style.scss'
import Panel from 'bayd/lib/panel'
import Card from 'bayd/lib/card'
import MyCanvas from 'bayd/lib/chart'

export default class ChartView extends Component{
	constructor(){
		super()
		this.state={
			defaultData:[2,4,6,8,10]
		}
	}
	changeDate = (e) => {
		this.setState({
			defaultData:e.target.value.split(',')
		})
	}
	renderContent = () => {
		return<Fragment>
			<Card 
				renderView={()=>{return<div>
					<MyCanvas canvasId={'myCanvas1'} data={[2,7,10,4,2]}/>
				</div>}} 
				description={'第一个Demo展示常用柱状图能力，需体现：横纵坐标及其刻度线、方形实心长方形柱'} 
				code={`import { MyCanvas } from 'bnt'
class Demo extends React.Component {
	render() {
		return <MyCanvas canvasId={'myCanvas1'} data={[5,4,3,2]}/>
	}
}`}/>
			<Card 
				renderView={()=>{return<div>
					<select onChange={this.changeDate}>
						<option label='2,4,6,8,10' value={[2,4,6,8,10]}></option>
						<option label='10,8,6,4,2' value={[10,8,6,4,2]}></option>
						<option label='3,6,9,3,1' value={[3,6,9,3,1]}></option>
					</select>
					<MyCanvas canvasId={'myCanvas2'} data={this.state.defaultData}/>
				</div>}} 
				description={'第二个Demo在Demo一基础上，增加一个下拉选择框，并对应选择3个数据集：通过切换数据集，中心的柱状图渲染对应的数据集合，展示柱状图数据驱动的能力'} 
				code={`import { MyCanvas } from 'bnt'
class Demo extends React.Component {
	constructor(){
		super()
		this.state={
			data:[1,1,1,1]
		}
	}
	changeDate = (e) => {
		this.setState({
			data:e.target.value
		})
	}
	render() {
		return <MyCanvas canvasId={'myCanvas1'} data={[5,4,3,2]}/>
	}
}`}/>
		</Fragment>
	}
	renderParams = () => {
		return <div className={styles['params-wrap']}>
			<div className={styles['table-row']}>
				<div>参数</div>
				<div>说明</div>
				<div>类型</div>
				<div>默认值</div>
				<div>版本</div>
			</div>
			<div className={styles['table-row']}>
				<div>data</div>
				<div>柱状图高度</div>
				<div>array</div>
				<div>[2,4,6,8,10]</div>
				<div></div>
			</div>
			<div className={styles['table-row']}>
				<div>canvasId</div>
				<div>id</div>
				<div>string</div>
				<div>-</div>
				<div></div>
			</div>
		</div>
	}
	render(){
		return <div className={styles['wrap']}>
			<Panel 
				name='Chart柱状图'
				description='基于多种报图平台（echarts等）Javascript API 的报图组件'
				renderContent={this.renderContent}
				renderParams={this.renderParams}
			/>
		</div>
	}
}